<template>
    <view>
        
    </view>
</template>

<script>
export default {
    data() {
        return {
            colors: '',
            svgSize: 18,
            quot: '"',
            isStr: true
        };
    },
    props: {
        // guanbi | sangedian | hezi
        name: {
            type: String
        },
        // string | string[]
        color: {
            type: null
        },
        size: {
            type: Number,
            default: 18
        }
    },
    methods: {
        fixColor: function () {
            var color = this.color;
            var hex2rgb = this.hex2rgb;

            if (typeof color === 'string') {
                return color.indexOf('#') === 0 ? hex2rgb(color) : color;
            }

            return color.map(function (item) {
                return item.indexOf('#') === 0 ? hex2rgb(item) : item;
            });
        },
        hex2rgb: function (hex) {
            var rgb = [];
            hex = hex.substr(1);

            if (hex.length === 3) {
                hex = hex.replace(/(.)/g, '$1$1');
            }

            hex.replace(/../g, function (color) {
                rgb.push(parseInt(color, 16));
                return color;
            });
            return 'rgb(' + rgb.join(',') + ')';
        }
    },
    watch: {
        color: {
            handler: function (color) {
                this.setData({
                    colors: this.fixColor(),
                    isStr: typeof color === 'string'
                });
            },

            immediate: true
        },

        size: {
            handler: function (size) {
                this.setData({
                    svgSize: size
                });
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './iconfont.css';
</style>
